<template>
    <div>
        <template>
        <el-table v-loading.body="loading" :data="companyUserList" border height="364" row-class-name="text-center">
            <el-table-column show-overflow-tooltip prop="name" label="公司中文名称">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="mobile" label="统一社会信用代码">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="nickname" label="申请人">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="mobile" label="申请人手机">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="applyTime" label="认证申请时间">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="option" label="操作">
                <template scope="scope">
                    <div @click='openCompanyCertDetail(scope.$index, companyUserList)'>
                        <div class="more-menu">
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <template>
        <div class="pagination-wrapper clearfix" v-if="companyUserListPagination.totalPage>1">
            <div class="fr mt-15">
                <span class="page-num mr-25 font-14">
            总数：<span v-text="companyUserListPagination.totalCount"></span> 每页显示
                <span v-text="companyUserListPagination.pageSize"></span> 条 共
                <span v-text="companyUserListPagination.totalPage"></span>页
                </span>
                <el-pagination @current-change="companyUserListChange" :current-page="companyUserListPagination.currentPage" :page-size="companyUserListPagination.pageSize" layout="prev, pager, next"
                    :total="companyUserListPagination.totalCount" class="fr">
                </el-pagination>
            </div>
        </div>
    </template>
    <!-- 待审核企业认证详情 -->
    <template>
        <el-dialog title="待审核企业认证详情"  :visible.sync="certCompanyDialogStatus" @close="closeDialog('certCompanyForm')">
            <el-row v-loading.body="loadingCertDetail">
                <el-col :span="10">
                    <img :src="companyCertDetail.businessLicenceImgPath" alt="">
                </el-col>
                <el-col :span="12">
                    <h3>企业认证信息</h3>
                    <hr>
                    <div  class="mt-15">
                        <div class="mt-15" > 企业名称：<span v-text="activeDialogData.name"></span></div>
                        <div class="mt-15"> 所在地：<span v-text=""></span></div>
                        <div class="mt-15"> 统一社会信用码：<span v-text="companyCertDetail.businessLicenceNum"></span></div>
                    </div>
                    <el-form  class="mt-15" :model="certCompanyForm" :rules="certCompanyFormRules" ref="certCompanyForm">
                        <el-form-item label="" prop="auditStatus">
                            <el-radio class="radio" v-model="certCompanyForm.auditStatus" label="2">通过</el-radio>
                            <el-radio class="radio" v-model="certCompanyForm.auditStatus" label="3" @change='fetchCompanyReasonList'>不通过</el-radio>
                        </el-form-item>
                        <el-form-item label="证件有效期至" prop="expireDate" v-if="certCompanyForm.auditStatus==2">
                            <el-date-picker v-model="certCompanyForm.expireDate" type="date" placeholder="选择日期" default-value>
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="原因分类" prop="reasonType" v-if="certCompanyForm.auditStatus==3">
                            <el-select v-model="certCompanyForm.reasonType" placeholder="请选择" >
                                <el-option v-for="item in reasonList" :key="item.key" :label="item.key" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="提醒内容" prop="reason" v-if="certCompanyForm.auditStatus==3">
                            <el-input v-model="certCompanyForm.reason" type="textarea" auto-complete="off" placeholder="最多100个汉字"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div class="text-right mt-15">
                <el-button @click="certCompanyDialogStatus = false">取 消</el-button>
                <el-button type="primary" @click="certCompanySubmit('certCompanyForm')">确 定</el-button>
            </div>
        </el-dialog>
    </template>
    </div>
</template>
<script>
    import {
        getCertCompanyNotAudited,
        postCertCompany,
        getCompanyCertDetail,
        getCompanyReasonList
    } from '@/api/user.js'
    export default {
        data () {
            return {
                loading: false,
                loadingCertDetail: false,
                // 公司列表内容
                companyUserList: [
                // {
                //     id: 0,
                //     nickname: '',
                //     mobile: '',
                //     name: '',
                //     applyTime: '',
                //     businessLicenceNum: ''
                // }
                ],
                // 公司列表翻页
                companyUserListPagination: {
                    currentPage: 1,
                    pageSize: 1,
                    totalCount: 0,
                    totalPage: 1
                },
                // 公司认证信息
                companyCertDetail: {},
                certCompanyForm: {
                    id: '',
                    auditStatus: '',
                    expireDate: '',
                    reasonType: '',
                    reason: ''
                },
                // 公司表单规则
                certCompanyFormRules: {
                    auditStatus: {
                        required: true,
                        message: '请选择是否通过',
                        trigger: 'blur'
                    },
                    expireDate: {
                        required: true,
                        type: 'date',
                        message: '请选择日期',
                        trigger: 'blur,change'
                    },
                    reasonType: {
                        required: true,
                        message: '请选择原因分类',
                        trigger: 'blur'
                    },
                    reason: {
                        required: true,
                        message: '请输入提醒内容',
                        trigger: 'blur'
                    }
                },
                // 不同原因的列表
                reasonList: [],
                activeDialogData: {},
                certCompanyDialogStatus: false
            }
        },
        methods: {
            selectChange (val) {
                this.certCompanyForm.reason = val
            },
            // 获取代办列表数据
            fetchCertCompanyNotAudited (data) {
                this.loading = true
                getCertCompanyNotAudited(data).then((response) => {
                    this.loading = false
                    if (response.data.code === 0) {
                        this.companyUserList = response.data.data.data
                        this.companyUserListPagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    }
                }).catch(function (err) {
                    this.loading = false
                    console.log(err)
                })
            },
            // 翻页
            companyUserListChange (page) {
                let param = {}
                param.currentPage = page
                param.pageSize = this.companyUserListPagination.pageSize
                this.fetchCertCompanyNotAudited(param)
            },
            // 打开对话框
            openCompanyCertDetail (index, data) {
                this.activeDialog(index, data, true)
                this.certCompanyDialogStatus = true
                // 先重置
                this.companyCertDetail = {}
                this.fetchCertDetail(this.activeDialogData.id)
                this.certCompanyForm.id = this.activeDialogData.id
                this.fetchCompanyReasonList()
            },
            // 获取审核详情
            fetchCertDetail (id) {
                this.loadingCertDetail = true
                getCompanyCertDetail({id}).then((response) => {
                    this.loadingCertDetail = false
                    if (response.data.code === 0) {
                        this.companyCertDetail = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    } else throw response
                }).catch(function (err) {
                    this.loadingCertDetail = false
                    console.log(err)
                })
            },
            // 对话框弹出，填写弹出框的显示数据
            activeDialog (index, data, isActive = false) {
                if (isActive) {
                    this.activeDialogData = data[index]
                } else {
                    this.activeDialogData = {}
                }
            },
            // 关闭对话框
            closeDialog (formName) {
                this.resetForm(formName)
                console.log('close')
            },
            // 重置表单
            resetForm (formName) {
                this.$refs[formName].resetFields()
                console.log(formName)
            },
            // 公司认证提交审核信息
            certCompanySubmit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = this.certCompanyForm
                        // data.id = this.activeDialogData.id
                        // data.mobile = this.changeMobileForm.mobile
                        // data.reason = this.changeMobileForm.reason
                        postCertCompany(data).then((response) => {
                            if (response.data.code === 0) {
                                this.closeDialog(formName)
                                this.certCompanyDialogStatus = false
                                console.log(this.certCompanyForm.expireDate)
                                // 刷新列表
                                this.fetchCertCompanyNotAudited({
                                    currentPage: this.companyUserListPagination.currentPage,
                                    pageSize: this.companyUserListPagination.pageSize
                                })
                            } else if (response.data.code === 1) {
                                this.$message('修改失败')
                            } else throw response
                        }).catch(function (err) {
                            console.log(err)
                        })
                    }
                })
            },
            // 获取原因列表
            fetchCompanyReasonList: function () {
                getCompanyReasonList().then((response) => {
                    if (response.data.code === 0) {
                        this.reasonList = response.data.data
                        console.log(response.data.data)
                    } else if (response.data.code === 1) {
                        // this.$message('修改失败')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            }
        },
        created () {
            this.fetchCertCompanyNotAudited()
        }

    }

</script>
